<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .box{
            width: 650px;
            height: 400px;
            background-color: skyblue;
            margin: 100px auto;
        }
        ul{
            list-style: none;
        }
        li{
            width: 100px;
            height: 50px;
            margin-right: 5px;
            float: left;
            text-align: center;
            cursor: pointer;
        }
        .curent{
            border-top: 2px solid orangered;
        }
        img{
            width: 100%;
            display: none;
        }
        .select{
            display: block;
        }
        .main{
        }
    </style>
</head>
<body>
    <div class="box">
        <ul class="ul">
            <li>第一個</li>
            <li>第二個</li>
            <li>第三個</li>
            <li>第四個</li>
        </ul>
        <img class="main select" src="./images/guojidapai.jpg" alt="">
        <img class="main" src="./images/guozhuangmingpin.jpg" alt="">
        <img class="main" src="./images/nanshijingpin.jpg" alt="">
        <img class="main" src="./images/qingjieyongpin.jpg" alt="">
    </div>
</body>
<script>
    // 獲取元素 註冊事件
    let liBtn = document.querySelectorAll('li');
    // 獲取到所有的列表(假裝是數據)
    let imgs = document.querySelectorAll('img');
    // for(var i = 0; i < liBtn.length; i++){
    //     // console.log(liBtn);
    //     liBtn[i].onclick = function(){
    //         for(var i = 0; i < liBtn.length; i++){
    //             liBtn[i].className = '';
    //         }
    //         this.className = 'curent';
    //     }
    // };
    // 循環數組
    liBtn.forEach(function(e,i){
        // 鼠標移入事件
        e.onmouseover = function(){
            liBtn.forEach(function(e){
                // 先清除所有的
                e.classList.remove('curent')
            })
            // 鼠標移入就添加
            this.classList.add('curent')
            // 循環數據列表
            imgs.forEach(function(e){
                // 先清除所有
                e.classList.remove('select');
            })
            // 給當前目標添加
            imgs[i].classList.add('select');
        }
    })
</script>
</html>